<html>
    <head>
        <title>工具类使用</title>
        <link rel="stylesheet" type="text/css" href="lib/webgl-tutorials.css">
    </head>

    <body onload="main()">
        <canvas id="canvas"></canvas>
        <div id="uiContainer">
        <div id="ui">
            <div id="x"></div>
            <div id="y"></div>
            <div id="angle"></div>
            <div id="scaleX"></div>
            <div id="scaleY"></div>
        </div>
        </div>
    </body>

    <script type='text/javascript' src="lib/webgl-utils.js"></script>
    <script type='text/javascript' src="lib/webgl-lessons-ui.js"></script>
    <script type='text/javascript' src='../lib/cuon-matrix.js'></script>
    <script id="vertex-shader-3d" type="x-shaderx-shader/x-vertex">
        attribute vec4 a_Position;
        uniform mat4 u_Transform;
        void main(){
            gl_Position = u_Transform * a_Position;
            gl_PointSize = 5.0;
        }
    </script>
    <script id="fragment-shader-3d" type="x-shader/x-fragment">
        precision mediump float;
        void main(){
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    </script>
    <script type="text/javascript">
        var translation = [0, 0, 0];
        var angleInRadians = 0;
        var scale = [1, 1];

        function main(){
            setupUI();

            var canvas = document.getElementById("canvas");
            var gl = canvas.getContext("webgl");
            if(!gl){
                error("not supported webgl.");
                return; 
            }
			var program = webglUtils.createProgramFromScripts(gl, ['vertex-shader-3d', 'fragment-shader-3d']);
            var a_Position = gl.getAttribLocation(program, "a_Position");
            var u_Transform = gl.getUniformLocation(program, "u_Transform");

            //vbo
            var positionBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
            setGeometry();


            drawScene();


            // Setup a ui.
            function setupUI(){
                webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: 400})
                webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: 300});
                webglLessonsUI.setupSlider("#z", {value: translation[2], slide: updatePosition(2), max: 100});
                webglLessonsUI.setupSlider("#angle", {slide: updateAngle, max: 360});
                webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
                webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});
            }


            function updatePosition(index) {
                return function(event, ui) {
                    translation[index] = ui.value;
                    drawScene();
                };
            }

            function updateAngle(event, ui) {
                var angleInDegrees = 360 - ui.value;
                angleInRadians = angleInDegrees * Math.PI / 180;
                drawScene();
            }

            function updateScale(index) {
                return function(event, ui) {
                    scale[index] = ui.value;
                    drawScene();
                };
            }

            function projection(width, height, depth){
                return [
                    2 / width, 0, 0, 0,
                    0, -2 / height, 0, 0,
                    0, 0, 2 / depth, 0,
                    -1, 1, 0, 1,
                ];
            }

            // Draw the scene.
            function drawScene() {
                webglUtils.resizeCanvasToDisplaySize(gl.canvas);
                gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
                gl.useProgram(program);
                
                gl.enableVertexAttribArray(a_Position);
                gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
                gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, 0, 0);

                var tf = projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
                var xTransformMat = new Matrix4(tf);
                xTransformMat.translate(translation[0], translation[1], translation[2]);
                console.log(xTransformMat.elements);
                gl.uniformMatrix4fv(u_Transform, false, xTransformMat.elements);
                
                gl.clearColor(0.0, 0.0, 0.0, 1.0);
                gl.clear(gl.COLOR_BUFFER_BIT);

                gl.drawArrays(gl.TRIANGLES, 0, 6 * 16);
            }

            function setGeometry(){
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
                    // left column front
                    0,   0,  0,
                    30,   0,  0,
                    0, 150,  0,
                    0, 150,  0,
                    30,   0,  0,
                    30, 150,  0,

                    // top rung front
                    30,   0,  0,
                    100,   0,  0,
                    30,  30,  0,
                    30,  30,  0,
                    100,   0,  0,
                    100,  30,  0,

                    // middle rung front
                    30,  60,  0,
                    67,  60,  0,
                    30,  90,  0,
                    30,  90,  0,
                    67,  60,  0,
                    67,  90,  0,

                    // left column back
                    0,   0,  30,
                    30,   0,  30,
                    0, 150,  30,
                    0, 150,  30,
                    30,   0,  30,
                    30, 150,  30,

                    // top rung back
                    30,   0,  30,
                    100,   0,  30,
                    30,  30,  30,
                    30,  30,  30,
                    100,   0,  30,
                    100,  30,  30,

                    // middle rung back
                    30,  60,  30,
                    67,  60,  30,
                    30,  90,  30,
                    30,  90,  30,
                    67,  60,  30,
                    67,  90,  30,

                    // top
                    0,   0,   0,
                    100,   0,   0,
                    100,   0,  30,
                    0,   0,   0,
                    100,   0,  30,
                    0,   0,  30,

                    // top rung right
                    100,   0,   0,
                    100,  30,   0,
                    100,  30,  30,
                    100,   0,   0,
                    100,  30,  30,
                    100,   0,  30,

                    // under top rung
                    30,   30,   0,
                    30,   30,  30,
                    100,  30,  30,
                    30,   30,   0,
                    100,  30,  30,
                    100,  30,   0,

                    // between top rung and middle
                    30,   30,   0,
                    30,   30,  30,
                    30,   60,  30,
                    30,   30,   0,
                    30,   60,  30,
                    30,   60,   0,

                    // top of middle rung
                    30,   60,   0,
                    30,   60,  30,
                    67,   60,  30,
                    30,   60,   0,
                    67,   60,  30,
                    67,   60,   0,

                    // right of middle rung
                    67,   60,   0,
                    67,   60,  30,
                    67,   90,  30,
                    67,   60,   0,
                    67,   90,  30,
                    67,   90,   0,

                    // bottom of middle rung.
                    30,   90,   0,
                    30,   90,  30,
                    67,   90,  30,
                    30,   90,   0,
                    67,   90,  30,
                    67,   90,   0,

                    // right of bottom
                    30,   90,   0,
                    30,   90,  30,
                    30,  150,  30,
                    30,   90,   0,
                    30,  150,  30,
                    30,  150,   0,

                    // bottom
                    0,   150,   0,
                    0,   150,  30,
                    30,  150,  30,
                    0,   150,   0,
                    30,  150,  30,
                    30,  150,   0,

                    // left side
                    0,   0,   0,
                    0,   0,  30,
                    0, 150,  30,
                    0,   0,   0,
                    0, 150,  30,
                    0, 150,   0
                ]), gl.STATIC_DRAW);
            }
        }
    </script>
</html>